
<template>
  <div class="bgkgc">
    <el-form :rules="rules" class="login-container">
      <h3 class="login-title">系统登陆</h3>
      <el-form-item prop="auname">
        <el-input type="text" placeholder="请输入账号" v-model="loginFrom.uname"></el-input>
      </el-form-item>
      <el-form-item prop="mypwd">
        <el-input type="password" placeholder="请输入登录密码" v-model="loginFrom.pwd"></el-input>
      </el-form-item>
      <el-checkbox class="login-rem" v-model="check">记住密码</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <!-- <el-label class="login-wang">忘记密码</el-label> -->
      <el-link type="primary" class="login-wang">忘记密码？点击找回</el-link>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="$event => mySub()">登&nbsp;&nbsp;录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
<script>
export default {
  name: "Login",
  data() {
    return {
      rules: {
        auname: [
          { required: true, message: "请输入账号信息", trigger: "blur" }
        ],
        mypwd: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      loginFrom: {
        uname: "",
        pwd: ""
      },
      check: true
    };
  },
  methods: {
    mySub(loginFrom) {
      console.log(loginFrom);
      // this.$ref[loginFrom].validate((valid) => {
      //   if (valid) {
      //     alert("你已经进入系统");
      //   } else {
      //     alert("信息不正确，请重新输入!")
      //   }
      // });
      this.$router.push("/home");
    }
  }
};
</script>
  
<style scoped>
.bgkgc {
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: 0 !important;
  padding: 0;
  opacity: 0.9;
  background: linear-gradient(black, grey, white);
  width: 100%;
  height: 100%;
}

.login-container {
  border-radius: 15px;
  background-clip: url(../assets/03.png);
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: rgb(194, 199, 213);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login-title {
  margin: Opx auto 40px auto;
  text-align: center;
  color: #505458;
}

.login-rem {
  margin: 0px 0px 35px 0px;
  text-align: left;
}

.login-wang {
  margin-top: -4px;
  text-align: left;
  font-size: smaller;
}
.login-background {
  background: url(../assets/03.png);
}
</style>
  